<template>
  <div class="mx-auto max-w-5xl px-12 py-10 bg-white rounded-2xl shadow-sm mt-5">
    <el-tabs v-model="activeTab" class="mb-6">
      <el-tab-pane v-for="item in tabs" :key="item.value" :name="item.value">
        <template #label>
          <span
            :class="[
              'px-5 py-2 transition-colors duration-500 text-sm',
              activeTab === item.value ? 'bg-[#4069fc]/10 text-primary font-medium' : 'text-gray-600 hover:text-primary'
            ]"
          >
            {{ item.label }}
          </span>
        </template>
      </el-tab-pane>
    </el-tabs>

    <el-form ref="formRef" :model="formModel" :rules="rules" label-width="150px" label-position="left" class="max-w-3xl">
      <el-form-item label="工艺名称" prop="name">
        <el-input v-model="formModel.name" placeholder="请输入工艺名称" />
      </el-form-item>

      <el-form-item label="工艺类别" prop="category">
        <el-select v-model="formModel.category" placeholder="请选择工艺类别">
          <el-option v-for="option in categoryOptions" :key="option.value" :label="option.label" :value="option.label" />
        </el-select>
      </el-form-item>

      <el-form-item label="是否重点监管" prop="isKeySupervised">
        <el-switch v-model="formModel.isKeySupervised" active-text="是" inactive-text="否" />
      </el-form-item>

      <el-form-item label="简介" prop="introduction">
        <el-input v-model="formModel.introduction" type="textarea" :autosize="{ minRows: 3, maxRows: 5 }" placeholder="请输入工艺简介" />
      </el-form-item>

      <el-form-item label="危险特性" prop="dangerousCharacteristics">
        <el-input
          v-model="formModel.dangerousCharacteristics"
          type="textarea"
          :autosize="{ minRows: 3, maxRows: 5 }"
          placeholder="请输入危险特性说明"
        />
      </el-form-item>

      <el-form-item label="安全控制的基本要求" prop="safetyRequirements">
        <el-input
          v-model="formModel.safetyRequirements"
          type="textarea"
          :autosize="{ minRows: 3, maxRows: 5 }"
          placeholder="请输入安全控制基本要求"
        />
      </el-form-item>

      <el-form-item label="应采用的控制方式" prop="controlMethods">
        <el-input v-model="formModel.controlMethods" type="textarea" :autosize="{ minRows: 3, maxRows: 5 }" placeholder="请输入应采用的控制方式" />
      </el-form-item>

      <div class="flex gap-4 mt-8">
        <el-button type="primary" @click="handleSubmit">保存</el-button>
        <el-button @click="handleReset">重置</el-button>
      </div>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, watch } from 'vue';
import type { FormInstance, FormItemRule, FormRules } from 'element-plus';
import { ElMessage } from 'element-plus';

type ProcessTabValue = 'hydrogen-production' | 'hydrogenation' | 'chemical-filtration';

interface ProcessTabItem {
  label: string;
  value: ProcessTabValue;
}

interface ProcessForm {
  name: string;
  category: string;
  isKeySupervised: boolean;
  introduction: string;
  dangerousCharacteristics: string;
  safetyRequirements: string;
  controlMethods: string;
}

const tabs: ProcessTabItem[] = [
  { label: '制氢工艺', value: 'hydrogen-production' },
  { label: '加氢工艺', value: 'hydrogenation' },
  { label: '过滤化工艺', value: 'chemical-filtration' }
];

const categoryOptions = tabs;
const activeTab = ref<ProcessTabValue>('hydrogen-production');

const formRef = ref<FormInstance>();

const createDefaultForm = (tabValue: ProcessTabValue): ProcessForm => ({
  name: '',
  category: tabs.find((item) => item.value === tabValue)?.label ?? '',
  isKeySupervised: false,
  introduction: '',
  dangerousCharacteristics: '',
  safetyRequirements: '',
  controlMethods: ''
});

const formModel = reactive<ProcessForm>(createDefaultForm(activeTab.value));

const validateAtLeastOne: FormItemRule = {
  validator: (_, __, callback) => {
    if (formModel.dangerousCharacteristics.trim() || formModel.safetyRequirements.trim() || formModel.controlMethods.trim()) {
      callback();
    } else {
      callback(new Error('危险特性、安全控制基本要求、控制方式至少填写一项'));
    }
  },
  trigger: ['change', 'blur']
};

const rules: FormRules<ProcessForm> = {
  name: [{ required: true, message: '请输入工艺名称', trigger: 'blur' }],
  category: [{ required: true, message: '请选择工艺类别', trigger: 'change' }],
  introduction: [],
  dangerousCharacteristics: [validateAtLeastOne],
  safetyRequirements: [validateAtLeastOne],
  controlMethods: [validateAtLeastOne]
};

watch(activeTab, (value) => {
  formModel.category = tabs.find((item) => item.value === value)?.label ?? '';
});

const handleSubmit = () => {
  if (!formRef.value) return;
  formRef.value.validate((valid) => {
    if (!valid) return;
    ElMessage.success('保存成功');
  });
};

const handleReset = () => {
  Object.assign(formModel, createDefaultForm(activeTab.value));
  formRef.value?.clearValidate();
};
</script>
